import {Component, OnInit} from '@angular/core';
import {IonicModule} from '@ionic/angular';
import {DeviceOrientation, DeviceOrientationCompassHeading} from '@ionic-native/device-orientation/ngx';


@Component({
  selector: 'device-orientation',
  templateUrl: 'device-orientation.page.html',
  styleUrls: ['device-orientation.scss'],
  standalone: true,
  imports: [IonicModule],
})
export class DeviceOrientationPage implements OnInit {
  headingDegrees: number;
  headingSymbol: string ;

  constructor(private deviceOrientation: DeviceOrientation) {
    this.headingDegrees = 0
    this.headingSymbol = ''
  }

  ngOnInit() {
    this.deviceOrientation.watchHeading().subscribe(
      (data: DeviceOrientationCompassHeading) => {
        this.headingDegrees = data.magneticHeading;
        this.headingSymbol = this.getSymbolFromDegrees(this.headingDegrees);
      }
    );
  }

  getSymbolFromDegrees(degrees: number): string {
    if (degrees >= 337.5 || degrees < 22.5) {
      return 'N';
    } else if (degrees >= 22.5 && degrees < 67.5) {
      return 'NE';
    } else if (degrees >= 67.5 && degrees < 112.5) {
      return 'E';
    } else if (degrees >= 112.5 && degrees < 157.5) {
      return 'SE';
    } else if (degrees >= 157.5 && degrees < 202.5) {
      return 'S';
    } else if (degrees >= 202.5 && degrees < 247.5) {
      return 'SW';
    } else if (degrees >= 247.5 && degrees < 292.5) {
      return 'W';
    } else if (degrees >= 292.5 && degrees < 337.5) {
      return 'NW';
    }
    return  ""
  }
}
